<template>
	<view>
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				银行卡号
				<input class="input" type="text" placeholder="请输入银行卡号" style="width: 500rpx;" v-model="cardno" />
			</view>
		</view>
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				开户行
				<input class="input" type="text" placeholder="请输入开户行" style="width: 500rpx;" v-model="cardname" />
			</view>
		</view>
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				开户行地址
				<input class="input" placeholder="请输入开户行地址" style="width: 500rpx;" type="text" v-model="cardaddress" />
			</view>
		</view>
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				真实姓名
				<input class="input" placeholder="请输入真实姓名" type="text" style="width: 500rpx;" v-model="realname" />
			</view>
		</view>
		<view class="yt-list-cell">
			<view class="cell-tit clamp">
				手机号
				<input class="input" type="number" placeholder="请输入手机号" style="width: 500rpx;" v-model="mobile" />
			</view>
		</view>
		<view class="yt-list-cell"><button type="primary" @click="submit">提交保存</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cardno: '',
			cardaddress: '',
			realname: '',
			cart_lists: '',
			mobile: '',
			cardname: ''
		};
	},
	computed: {},
	onLoad() {},
	methods: {
		submit() {
			this.https('/order/postMasterBank', {
				cardno: this.cardno,
				cardaddress: this.cardaddress,
				realname: this.realname,
				mobile: this.mobile,
				cardname: this.cardname
			}).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				setTimeout(e => {
					uni.navigateBack();
				}, 1500);
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}
.yt-list-cell .cell-tit .input {
	width: 500rpx;
}
.user-section {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 460upx;
	padding: 40upx 30upx 0;
	position: relative;

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		filter: blur(1px);
		opacity: 0.7;
	}

	.portrait-box {
		width: 200upx;
		height: 200upx;
		border: 6upx solid #fff;
		border-radius: 50%;
		position: relative;
		z-index: 2;

		.button {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			opacity: 0;
		}
	}

	.portrait {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.yticon {
		position: absolute;
		line-height: 1;
		z-index: 5;
		font-size: 48upx;
		color: #fff;
		padding: 4upx 6upx;
		border-radius: 6upx;
		background: rgba(0, 0, 0, 0.4);
	}

	.pt-upload-btn {
		right: 0;
		bottom: 10upx;
	}

	.bg-upload-btn {
		right: 20upx;
		bottom: 16upx;
	}
}

.yt-list-cell {
	margin-top: 16rpx;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 10rpx 30rpx;
	line-height: 70rpx;
	position: relative;

	.cell-tit {
		flex: 1;
		font-size: 26rpx;
		color: #000000;
		margin-right: 10rpx;

		.input {
			display: inline-block;
			vertical-align: middle;
			margin-left: 20rpx;
			width: 550rpx;
			float: right;
			line-height: 70rpx !important;
			height: 70rpx !important;
		}

		.username {
			width: 300rpx;
			position: absolute;
			right: 30rpx;
			z-index: 100;
		}
	}
}
</style>
